<script setup>
import { Progress, NavBar } from 'vant'
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import ContractLogistics from '@/pages/contract/create/contract-logistics.vue'
import ContractOrder from '@/pages/contract/create/contract-order.vue'
import ContractProducts from '@/pages/contract/create/contract-products.vue'
// import cgToast from '@/components/toast/index.js'
import StepBtn from '../components/stepBtn.vue'
import commonModel from '@/http/modules/common.js'
// import contractModel from '../../../http/modules/contract'
const percentage = ref(25) // 创建合同的进度
const activePage = ref(0) // 当前在第几步
const contractId = ref('')
const fullParams =ref({})
const isBGD = ref(false)
const route = useRoute()
const router = useRouter()
const RefContractOrder = ref()
const RefContractProducts = ref()
const RefContractLogistics = ref()
const contractDetail = ref({})
const editId = computed(() => route.query.id)
const editStep = computed(() => route.query.step)
function handleNextClick() {
  switch (activePage.value) {
    case 0:
      RefContractOrder.value.checkForm()
      break
    case 1:
      RefContractProducts.value.checkForm()
      break
  }
}
function handleSketchClick() {
  switch (activePage.value) {
    case 0:
      RefContractOrder.value.sketchForm()
      break
    case 1:
      RefContractProducts.value.sketchForm()
      break
    case 2:
      RefContractLogistics.value.sketchForm()
      break
  }
}
function handleSubmitClick() {
  RefContractLogistics.value.checkForm()
}
function handleBack() {
  if (activePage.value === 0 || editStep.value) {
    goBack()
  } else {
    percentage.value -= 25
    activePage.value--
  }
}
function addStep() {
  activePage.value++
  percentage.value += 25
}
function goBack() {
  if (window.history.length === 1) {
    // 返回app
  } else if (route.meta.backHome) {
    router.replace('/')
  } else {
    router.go(-1)
  }
}

function submitContractOrder(id, bgd,params) {
  addStep()
  fullParams.value = {...fullParams.value,contractInfo:params}
  contractId.value = id
  isBGD.value = bgd
}

async function submitContractProducts(params) {
  fullParams.value = {...fullParams.value,goodsInfo:params}
  addStep()
}

function getContractDetail() {
  const domainId = route.query.id
  if (!domainId) return
  commonModel
    .gatewayApi({
      bizContent: {
        contractOrderNo: domainId,
      },
      service: 'cb_trade_contract_detail',
      version: '1.0.0',
    })
    .then((result) => {
      if (result) {
        contractDetail.value = result
      }
    })
}
onMounted(() => {
  getContractDetail()
  if (editStep.value) {
    activePage.value = 2
    percentage.value = 75
    contractId.value = editId.value
    isBGD.value = false
  }
})
function sketchContactIdHandle(id){
  contractId.value = id
}
</script>

<template>
  <div class="create__contract">
    <NavBar
      :title="editId ? '编辑合同' : '创建合同'"
      left-arrow
      fixed
      @click-left="handleBack"
    />
    <Progress
      :percentage="percentage"
      :show-pivot="false"
      color="#2D82FF"
      track-color="#ffffff"
    />
    <div class="create__contract-con">
      <contract-order
        v-show="activePage === 0"
        ref="RefContractOrder"
        :contract-id="contractId"
        :edit-contract-id="editId"
        :contractDetail="contractDetail"
        @sketchContactId="sketchContactIdHandle"
        @checkSuccess="submitContractOrder"
      />
      <contract-products
        v-show="activePage === 1"
        ref="RefContractProducts"
        :contract-id="contractId"
        :edit-contract-id="editId"
        :contractDetail="contractDetail"
        @checkSuccess="submitContractProducts"
      />
      <contract-logistics
        :fullParams="fullParams"
        v-show="activePage === 2"
        ref="RefContractLogistics"
        :contract-id="contractId"
        :isBGD="isBGD"
        :edit-contract-id="editId"
        :edit-step="editStep"
        :contractDetail="contractDetail"
        :status="contractDetail.contractStatus"
      />
    </div>
    <step-btn
      :contractDetail="contractDetail"
      :is-end="activePage === 2"
      @next="handleNextClick"
      @sketch="handleSketchClick"
      @submit="handleSubmitClick"
    />
  </div>
</template>

<style lang="scss" scoped>
.create__contract {
  padding: 44px 0 88px 0;
  .progress__fixed {
    position: fixed;
    top: 44px;
  }
}
:deep {
  .van-nav-bar {
    height: 44px;
    .van-icon-arrow-left {
      color: #000;
    }
  }
  .van-progress {
    height: 3px;
    border-radius: 0;
    //z-index: 9;
    //position: fixed;
    //top: 44px;
    //width: 100%;
  }
  .van-radio__label {
    color: #222222;
  }
  .van-hairline--top-bottom:after {
    border-width: 0;
  }
  .van-cell {
    padding-left: 0;
    .van-field__label {
      margin-right: 22px;
      font-size: 14px;
      color: #222222;
      label {
        font-weight: normal;
      }
    }
  }
}
</style>
